<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>省份top3热门广告分析</title>

    <script type="text/javascript" src="../resources/js/contants.js"></script>
    <link href="../resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="../resources/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.min.css" rel="stylesheet">
    <link href="../resources/css/dateRange.css" rel="stylesheet">
    <link href="../resources/css/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
    <link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
    <link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">


<div class="wrapper wrapper-content">
    <div class="row">
        <div id="demo1" class="col-sm-12">
            <button onclick="startMockData()">开始模拟生成广告数据</button>
            <button onclick="stopMockData()">停止模拟生成广告数据</button>
        </div>
        <div id="demo" class="col-sm-12"></div>
    </div>
</div>

<script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../resources/js/dateRange.js"></script>
<script type="text/javascript" src="../resources/js/bootstrap-select.min.js"></script>
<!-- highcharts js -->
<script type="text/javascript" src="../resources/js/highcharts.js"></script>
<script type="text/javascript" src="../resources/js/exporting.js"></script>
<script type="text/javascript" src="../resources/js/json2.js"></script>
<script type="text/javascript" src="../resources/js/common.js"></script>

<script type="text/javascript">
    Highcharts.setOptions({
        tooltip: {
            pointFormat: '<span stype="color:{series.color}">{series.name}</span>:<b>{point.y:,0.001f}</b><br/>',
        }
    });

    window.setInterval(showalert, 5000);

    function showalert()
    {
        loadContent();
    }

    function loadContent() {
        var url = COMMON_PREFIX_URL + "/stats/adProvinceTop3";

        $.get(url, {}, function (data) {
            cleanContent("demo");
            if (data.code == '200') {
                if (data.data.length == 0) {
                    showNoConnent("demo");
                    return;
                }

                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'demo', // 在那个标签上显示，指定id即可
                        type: "column" // 类型
                    },
                    title: {
                        text: "省份top3热门广告图"
                    },
                    xAxis: {
                        title: {
                            text: "日期(天)/省份"
                        }
                    },
                    yAxis: [{
                        min: 0,
                        title: {
                            text: "广告点击量(次数)"
                        },
                        tickPositions: [0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300]
                    }],
                    series: []
                });


                var categories = [];
                var adSeries = {
                    name: "TOP3广告点击量(次数)",
                    data: []
                };


                $.each(data.data, function (i, item) {
                    console.log("item=" + item)
                    console.log("date=" + item["date"])
                    console.log("province=" + item["province"])
                    console.log("adid=" + item["adid"])
                    console.log("clickCount=" + item["clickCount"])

                    categories.push(item["date"] + "/" + item["province"]);
                    adSeries["data"].push(item["clickCount"]);
                });

                chart.addSeries(adSeries);
                chart.xAxis[0].setCategories(categories);
                return true;
            } else {
                showNoConnent("demo", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
            }
            return false;
        }, "json");
    }

    $(document).ready(function () {
        loadContent();
    });

</script>
</body>
</html>